$_subMenuWidth: 1000px;
$_subMenuOutGapWidth: 2 * $gobalCommonGap;
$_subMenuItemCountPerline: 4;
$_subMenuListWidth: ($_subMenuWidth - 2 * $_subMenuOutGapWidth) / $_subMenuItemCountPerline;
$_subMenuHoverBackgroundColor: #242c37;
$_logoTopGap: 10px;

#description {
  position: absolute;
  top: 0;
  height: $headerHeight;
  left: 0;
  right: 0;
  background-color: $gobalBackgoundColor;
  color: #fff;

  & > .left_part{
    float: left;
  }

  #logo{
    padding: 0;
    margin: $_logoTopGap;
    display: inline-block;
    width: 2 * $headerHeight;
    height: $headerHeight - 2 * $_logoTopGap;
    background-image: url("../images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  #menu{
    display: inline-block;
    line-height: $headerHeight;
    vertical-align: top;

    & > div{
      display: inline-block;
    }

    .category_title{
      padding: 0 2 * $gobalCommonGap;

      &:not(:last-of-type){

        &::after{
          position: relative;
          display: inline-block;
          right: - 2 * $gobalCommonGap;
          content: '|';
          transform: scaleX(0.5);
          color: $lightFontColor;
        }
      }

      &:hover {
        cursor: pointer;
      }
    }

    #category{
      position: relative;

      & > .category_title{

        & > .icon{
          font-size: $smallFontSize;
          vertical-align: middle;
        }
      }

      &:hover{
        background-color: $_subMenuHoverBackgroundColor;

        .category_title{
          color: $gobalHoverColor;

          & > .icon{
            display: inline-block;
            transform: rotateX(180deg);
          }
        }

        & > #sub_menu{
          display: block;
        }
      }
    }
  }
//下拉菜单静态样式；
  #sub_menu{
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: $headerHeight;
    width: $_subMenuWidth;
    overflow: hidden;
    padding: $gobalCommonGap $_subMenuOutGapWidth;
    background-color: $_subMenuHoverBackgroundColor;

    .product_list{
      float: left;
      width: $_subMenuListWidth;
      padding-right: 20px;
    }

    .product_title{
      color: $lightFontColor;
      line-height: 2;
      border-bottom: 1px solid $lightFontColor;
      margin-bottom: 10px;
      & > em{
        font-style: normal;
      }
    }

    .product_link_item{
      line-height: 2;
      color: white;

      &:hover{
        text-decoration: none;
        color: $gobalHoverColor;
      }
    }
  }

  & > .right_part{
    float:right;
    line-height: $headerHeight;

    & > span{
      padding: 0 $gobalCommonGap;
      border-left: 1px solid #4e5866;

      &:first-of-type{
        border: 0;
      }
    }
  }
}